<template>
  <div class="like">
    <div
      class="goods"
      v-for="(item,index) in list"
      :key="index"
      @click="toCart(item.id)"
    >
      <div class="list-img">
        <img :src="item.pic" alt="" />
        <div class="list-name">
          {{ item.name }}
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props:{
      list:{
          type:Array
      }
  },
  data() {
    return {};
  },
  created() {
      console.log(this.list);
  },
  methods: {
      toCart(){

      }
  },
};
</script>

<style lang="scss" scoped>
.like {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.2rem;
  .goods{
    width: 48%;
    height: 3.5rem;
    .list-img{
      width: 100%;
      height: 100%;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      .list-name{
        width: 100%;
        height: 0.7rem;
        background-color: coral;
        line-height: 0.7rem;
        font-size: 0.28rem;
        padding: 0 0.1rem;
        position: absolute;
        bottom: 0;
      }
    }
  }
}
</style>
